<script setup lang="ts">
    import {reactive, ref,watchEffect} from 'vue';
/**
 * 监视器 watchEffect
 * 语法：
 *  watch(监视哪个值,值改变后的回调函数,{监视的配置})
 */
    let sum = ref(0);
    let msg = ref("你好啊");
    let person = reactive({
        name: 'zhangsan',
        age: 18,
        job: {
            j1:{
                salary: 20
            },
            j2: "程序员"
        }
    })

    /* 
        watchEffect 是你在回调中用到什么数据就监视什么数据,回调函数中直接写相关逻辑
    */
    watchEffect(()=>{
        const x = sum.value;
        console.log("watchEffect的回调函数被执行了");
    })
  
</script>




<template>
    <h2>情况一: 当前求和为{{ sum }}</h2>
    <button @click="sum++">点我+1</button>
    <h2>情况二: {{ msg }}</h2>
    <button @click="msg += '!'">修改信息</button>
    <hr>
    <h2>情况三:</h2>
    <h3>姓名：{{ person.name }}</h3>
    <h3>年龄: {{ person.age }}</h3>
    <h3>薪资: {{ person.job.j1.salary }}</h3>
    <h3>工作: {{ person.job.j2 }}</h3>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
    <button @click="person.job.j1.salary++">涨薪</button>
    <button @click="person.job.j2 += '@'">修改工作</button>
</template>

<style scoped>

</style>